<template>
  <el-dialog
      title="Add Account"
      :modal="false"
      :visible.sync="accountInfo"
      width="400px"
      :close-on-click-modal="false"
      destroy-on-close
      @close="handleClose">
    <div>
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="username" label-width="0">
          <el-input
              placeholder="Please enter username"
              autocomplete="new-password"
              v-model="form.username"
              clearable>
            <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label-width="0">
          <el-input
              placeholder="Please enter password"
              autocomplete="new-password"
              show-password
              v-model="form.password"
              clearable>
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" style="text-align: right">
      <el-button type="primary" @click="onConfirm">Confirm</el-button>
      <el-button @click="accountInfo = false">Cancel</el-button>
    </span>
  </el-dialog>

</template>
<script>

export default {
  data() {
    return {
      accountInfo: false,
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please enter username', trigger: 'change' }
        ],
        password: [
          { required: true, message: 'Please enter password', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    init() {
      this.accountInfo = true
    },
    handleClose() {
      this.form = {}
      this.accountInfo = false
    },
    onConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('onConfirm');
        }
      });
    },

    handleChoiceFile() {
      this.$refs.file.dispatchEvent(new MouseEvent('click'))
    }
  }
}
</script>
<style lang="less" scoped>
.pagination {
  width: 100%;
  text-align: right;
}

.delete {
  margin-left: 12px;
  color: #409EFF;
  cursor: pointer
}

.delete:hover {
  color: #f56c6c
}
</style>
